<template>
<div>
  <div class="hearder">

  </div>
  <div class="content">
<!--  审核页面+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->
    <div class="auditStyle">
      <el-table
          :data="dataList"
          style="width: 100%;">
        <el-table-column
            prop="orderId"
            header-align="center"
            align="center"
            label="工单号">
        </el-table-column>
        <el-table-column
            prop="status"
            header-align="center"
            align="center"
            label="审核状态">
          　<template slot-scope="scope">
          　　　　  <el-tag type="warning" style="line-height: 27px" v-if="scope.row.status == 0">恢复申请</el-tag>
          <el-tag type="primary" style="line-height: 27px" v-if="scope.row.status == 1">新增申请</el-tag>
          <el-tag type="success" style="line-height: 27px" v-if="scope.row.status == 2">完成审核</el-tag>
          　</template>
        </el-table-column>
        <el-table-column
            prop="shopTitle"
            header-align="center"
            align="center"
            :show-overflow-tooltip='true'
            label="商品标题">
        </el-table-column>
        <el-table-column
            prop="spuId"
            header-align="center"
            align="center"
            :show-overflow-tooltip='true'
            label="spuId">
        </el-table-column>
        <el-table-column
            prop="shopType"
            header-align="center"
            align="center"
            :show-overflow-tooltip='true'
            label="商品类型">
        </el-table-column>
        <el-table-column
            prop="store"
            header-align="center"
            align="center"
            :show-overflow-tooltip='true'
            label="店铺">
        </el-table-column>
        <el-table-column
            prop="brand"
            header-align="center"
            align="center"
            :show-overflow-tooltip='true'
            label="品牌">
        </el-table-column>
        <el-table-column
            prop="spuImage"
            header-align="center"
            align="center"
            label="商品图片">
          <template slot-scope="scope">
            　<img :src="scope.row.spuImage" width="40" height="40" style="border-radius: 7px"/>
          </template>
        </el-table-column>
        <el-table-column
            prop="applyName"
            header-align="center"
            align="center"
            label="申请人">
        </el-table-column>
        <el-table-column
            prop="applyRoleId"
            header-align="center"
            align="center"
            label="申请人角色">
          <template slot-scope="scope">
            　　　　  <el-tag type="success" style="line-height: 27px" v-if="scope.row.applyRoleId == 1">超级管理员</el-tag>
                    <el-tag type="primary" style="line-height: 27px" v-if="scope.row.applyRoleId == 2">管理员</el-tag>
            　</template>
        </el-table-column>
        <el-table-column
            prop="time"
            header-align="center"
            align="center"
            label="申请时间">
        </el-table-column>
        <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            label="操作">
          <template slot-scope="scope">
            <el-button type="success" size="small" @click="auditPass(scope.row)" v-if="scope.row.status!=2">通过</el-button>
            <el-button type="warning" size="small" v-if="scope.row.status!=2" @click="openInvalid(scope.row.orderId)">商品违规</el-button>
            <el-tag type="primary" style="line-height: 27px" v-if="scope.row.status==2">审核完成</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div class="page">
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[7,15,20,30,50,200]"
          :page-size='pageSize'
          layout="total, sizes, prev, pager, next, jumper"
          :total='total'>
      </el-pagination>
    </div>
  </div>
  <div>
    <el-dialog
        title="违规原因"
        :visible.sync="dialogVisible"
        width="30%"
        :close-on-click-modal="dialogStyle"
        :close-on-press-escape="dialogStyle"
        :show-close="dialogStyle"
        >
      <p>请填写违规项和违规理由</p>
     <form>
       <el-input type="textarea" v-model="remark" ></el-input>
     </form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="invalid">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'
import pageUtil from "../common/pageUtil";
export default {
//import引入的组件需要注入到对象中才能使用
components: {
  pageUtil
},
props: {},
data() {
//这里存放数据
return {
  dataList:[],
  pageSize: 7,
  pageNum:1,
  total:0,
  dialogStyle:false,
  activeName: 'auditTab',
  doTab: 'auditTab',
  text:true,
  dialogVisible:false,
  orderId:null,
  remark:""


};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  getSpu(){
    //调用审核页面
    if (this.doTab == "auditTab"){
      this.$http({
        url: 'sys/audit/page',
        method: 'post',
        data: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        }
      }).then((res)=>{
        // console.log(res)
        this.dataList = res.data.list
        //分页数据，总条数
        this.total = res.data.page.totalCount
      })
    }
    if (this.doTab == "auditLogTab"){
      this.dataList = null
      console.log("日志")
    }
  },
  handleSizeChange(val) {
    this.pageSize = val
    this.getSpu()
  },
  handleCurrentChange(val) {
    this.pageNum = val
    this.getSpu()

  },
  handleClick(tab) {
    this.doTab = tab.name
    this.getSpu()
  },
  Changestatus(status){
    console.log(status)
  },
  auditPass(item){
    this.$http({
      url:"sys/auditlog/pass",
      method:"post",
      data:{
        orderId:item.orderId,
        auditId:sessionStorage.getItem("userId")

      }
    }).then((res)=>{
      this.getSpu()
    })
  },
  openInvalid(item) {
    this.orderId = item
    this.dialogVisible = true
  },
  invalid(){

    this.$http({
      url:"sys/auditlog/invalid",
      method:"post",
      data:{
        orderId:this.orderId,
        userId:sessionStorage.getItem("userId"),
        remark:this.remark
      }
    }).then((res)=>{
      console.log(res)
      this.getSpu()
      this.dialogVisible = false
    })
  }
},
//声明周期 - 创建完成（可以访问当前this实例）
created() {
  this.getSpu()
},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
*{
  line-height: 0;
}
</style>
